<!-- 注意：该组件预览本地文件需要将文件下载到dist目录下 -->
<template>
    <div id="document">
        <!-- 分页组件 -->
        <div class="component" v-show="schedule === 1">
            <div @click="pageWay('first')" class="headTail">首页</div>
            <div @click="rotateWay('obey')" class="headTail">
                <el-tooltip class="item" effect="dark" content="顺时针旋转" placement="top">
                    <i style="font-size: 18px" class="el-icon-refresh-right"></i>
                </el-tooltip>
            </div>
            <div @click="pageWay('pre')" class="fluctuatePage" :style="pageNumber === 1 ? 'cursor: not-allowed;' : ''">
                上一页
            </div>
            <div class="pagination">
                <input v-model.number="pageNumber" type="number" class="inputNumber" @input="inputEvent()" />
                <span> / {{ pageValue }}</span>
            </div>
            <div @click="pageWay('next')" class="fluctuatePage"
                :style="pageNumber === pageValue ? 'cursor: not-allowed;' : ''">
                下一页
            </div>
            <div @click="rotateWay('contrary')" class="headTail">
                <el-tooltip class="item" effect="dark" content="顺时针旋转" placement="top">
                    <i style="font-size: 18px" class="el-icon-refresh-left"></i>
                </el-tooltip>
            </div>
            <div @click="pageWay('last')" class="headTail">尾页</div>
        </div>
        <!-- pdf 组件 -->
        <div class="pdfContent">
            <pdf :src="pdfUrl" ref="pdf" v-show="schedule === 1" :rotate="pageRotate" :page="pageNumber"
                @num-pages="pageValue = $event" @progress="schedule = $event" @page-loaded="pageNumber = $event"
                @loaded="loadPdfHandler" @link-clicked="pageNumber = $event" id="pdfID"></pdf>
        </div>
        <!-- loading 组件 -->
        <div class="progress" v-show="schedule !== 1">
            <el-progress type="circle" :width="60" color="#53a7ff" :percentage="Math.floor(schedule * 100)"></el-progress>
            <p>{{ loadingTxt }}</p>
        </div>
    </div>
</template>
  
<script>
import pdf from "vue-pdf";
export default {
    name: "SwPdfPreview",
    components: {
        pdf,
    },
    props: {
        fileName: {
            type: String,
            default: ''
        }
    },
    data() {
        const loadingText = "加载文件中，文件较大请耐心等待...";
        return {
            remindText: {
                loading: loadingText, // 加载中提示语
                refresh: "若卡住不动，可刷新页面重新加载...", // 刷新提示语
            },
            loadingTxt: loadingText, // 初始加载提示语
            pageRotate: 0, //旋转角度
            pageNumber: 0, // 当前页数
            pageValue: 0, // 总页数
            schedule: 0, // 加载进度
            timerId: "", // 定时器 ID
            pdfUrl: "", // pdf 文件路径
        };
    },
    // 在组件销毁时清除定时器
    destroyed() {
        clearInterval(this.timerId);
    },
    mounted() {
        this.pdfUrl = './pdf/web/httpFileCache/' + this.fileName
        this.$nextTick(() => {
            this.prohibit();
            this.timerId = setInterval(() => {
                // 设置定时器，每隔一段时间切换加载提示语
                this.loadingTxt === this.remindText.refresh
                    ? (this.loadingTxt = this.remindText.loading)
                    : (this.loadingTxt = this.remindText.refresh);
            }, 4000);
            this.listenerFunction(); // 调用监听滚动条事件的方法
        })
    },
    methods: {
        // 监听输入事件
        inputEvent() {
            // 输入页数大于总页数时，设置为总页数，输入页数小于 1 时，设置为 1
            this.pageNumber = Math.max(1, Math.min(this.pageNumber, this.pageValue));
        },
        // 上一页、下一页、首页、尾页事件
        pageWay(val) {
            if (val === "pre" && this.pageNumber > 1) {
                this.pageNumber--; // 上一页
            } else if (val === "next" && this.pageNumber < this.pageValue) {
                this.pageNumber++; // 下一页
            } else if (val === "first") {
                this.pageNumber = 1; // 首页
            } else if (val === "last" && this.pageNumber < this.pageValue) {
                this.pageNumber = this.pageValue; // 尾页
            }
            this.toTop(); // 滚动到顶部
        },
        // 顺/逆旋转
        rotateWay(val) {
            this.pageRotate += val === "obey" ? 90 : -90;
        },
        // 滚动顶部
        toTop() {
            const container = document.getElementById("document").parentElement;
            container.scrollIntoView({ behavior: "smooth", block: "start" });
        },
        // 监听 pdf 加载完成事件
        loadPdfHandler() {
            this.pageNumber = 1; // 加载 pdf 时，设置当前页数为 1
        },
        // 禁止特定的操作
        prohibit() {
            // 禁用右键菜单
            document.oncontextmenu = function () {
                return false;
            };
            // 禁用按键
            document.onkeydown = function (e) {
                // 定义需要禁用的按键码数组
                const forbiddenKeys = [65, 67, 73, 74, 80, 83, 85, 86, 117, 18, 123];
                // 判断按下的按键是否在禁用数组中，如果是则返回 false 禁用按键
                if (e.ctrlKey && forbiddenKeys.includes(e.keyCode)) {
                    return false;
                }
            };
        },
        // 监听滚动条事件
        listenerFunction(e) {
            document
                .getElementById("document")
                .addEventListener("scroll", function (event) {
                    // 监听滚动事件
                    console.log(event);
                });
        },
    },
};
</script>
<style scoped lang="less">
#document {
    overflow: auto;
    min-height: 100vh;
    width: 100%;
    display: flex;
    position: relative;

    .component {
        user-select: none;
        color: #ffffff;
        position: fixed;
        bottom: 5%;
        left: 50%;
        margin-left: -250px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 30px;
        width: 420px;
        padding: 15px 40px;
        z-index: 99;

        .pagination {
            position: relative;
            top: 1px;

            .inputNumber {
                border-radius: 5px;
                border: 1px solid #8b8b8b;
                width: 36px;
                height: 16px;
                text-align: center;
                background: transparent;
            }

            .inputNumber:focus {
                border: 1px solid #00aeff;
                background: rgba(18, 163, 230, 0.1);
                outline: none;
                transition: 0.2s;
            }
        }

        .headTail {
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .fluctuatePage {
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .fluctuatePage:hover,
        .headTail:hover {
            transition: 0.3s;
            color: #409eff;
            cursor: pointer;
        }
    }

    .pdfContent {
        width: 100%;
    }

    .progress {
        width: 222px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -111px;
        text-align: center;
    }

    .progress p {
        color: #199edb;
        font-size: 14px;
    }
}

/*在谷歌下移除input[number]的上下箭头*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

/*在firefox下移除input[number]的上下箭头*/
input[type="number"] {
    -moz-appearance: textfield;
}
</style>
  